<link rel="stylesheet" href="/static/css/login.css">
<div class="login">
    <h1>Login</h1>
    <form method="post" >
        <input type="text" id="user" name="user" placeholder="Username" required="required" />
        <input type="password" id="password" name="password" placeholder="Password" required="required" />
        <button type="submit" id="login" class="btn btn-primary btn-block btn-large">Let me in.</button>
    </form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js"></script>
<script src="/static/js/fetch.js"></script>
<script>
        var  user = document.getElementById('user')
        var  password2 = document.getElementById('password')
        var  btn = document.getElementById('login')

        btn.onclick = function(e){
                e.preventDefault()
            
            // 
             password   = md5(password2.value) 
           console.log("加密成功" , password);
            fetch('/login',{ 
                method: 'POST', 
                    headers: {
                    'Content-Type': 'application/json'
    },
                    body: JSON.stringify( { user:user.value , password})
                 
            }).then( res => res.json() )
            .then(res =>{
                 if(res.code == 20000){
                    alert('登录成功')
                    location.href = "/"
                 }else{ 
                     alert("账号密码错误")
                 }
            })

      
        }

</script>